<template>
  <div class="wrap">
    <div class="rentWrap" :style="backgroundDiv">
      <p class="Expalin">租金有效期至：</p>
      <p class="date">{{ shopInfo.endRentTime }}</p>
    </div>
    <div class="nextButton" @click="jumpRelent">立即续租</div>
  </div>
</template>

<script>
import { RadioGroup } from "vant";
import { apiPlatformGetUserShopDetails } from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      backgroundDiv: {
        backgroundImage: "url(" + require("@/assets/rentBg.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
      },
      shopInfo: "", //店铺信息
    };
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
    this.getPlatformGetUserShopDetails();
  },
  methods: {
    //获取店铺信息
    getPlatformGetUserShopDetails() {
      apiPlatformGetUserShopDetails({}).then((res) => {
        this.shopInfo = res.data;
      });
    },
    jumpRelent() {
      this.$router.replace({
        path: "/pages/bRelet",
        query: {
          //传递参数
        },
      });
    },
  },
  created() {},
  components: {
    [RadioGroup.name]: RadioGroup,
  },
};
</script>

<style scoped>
.rentWrap {
  width: 95%;
  margin: 0 auto;
  height: 121px;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  line-height: 30px;
  text-align: center;
}
.Expalin {
  padding-top: 38px;
  padding-left: 26px;
}
.date {
  padding-left: 26px;
}
.nextButton {
  width: 95%;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
  background: #181818;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  position: fixed;
  bottom: 40px;
  left: 2.5%;
}
</style>
